<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NCM转MP3在线转换器</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-music"></i> NCM转MP3转换器</h1>
            <p>拖拽文件到下方区域即可开始转换</p>
        </header>

        <main>
            <div class="drop-zone" id="dropZone">
                <i class="fas fa-cloud-upload-alt"></i>
                <h3>拖拽 .ncm 文件到此处</h3>
                <p>或点击选择文件</p>
                <input type="file" id="fileInput" accept=".ncm" multiple hidden>
            </div>

            <div class="file-list" id="fileList" style="display: none;">
                <h3>转换列表</h3>
                <div id="fileItems"></div>
            </div>

            <div class="actions" style="display: none;" id="actions">
                <button class="btn btn-primary" id="saveBtn">
                    <i class="fas fa-folder-open"></i> 选择保存文件夹
                </button>
                <button class="btn btn-secondary" id="clearBtn">
                    <i class="fas fa-trash"></i> 清空列表
                </button>
            </div>
        </main>

        <footer>
            <p>纯前端转换，文件不会上传到服务器</p>
        </footer>
    </div>

    <script type="module" src="main.js"></script>
</body>
</html>
